<template>
	<view>
		<image :src="info.img" mode="" class="img"></image>
	</view>
	<view class="infomation">
		<view class="title">
			{{info.title}}
		</view>
		<view class="content">
			{{info.content}}
		</view>
		<view class="time">
			{{info.time}}
		</view>
		<view class="" style="margin: 30rpx;border-bottom: 1rpx solid rgb(138,138,138);">
			
		</view>
		
		<view class="time" style="color: rgb(138,138,138);">
			共{{count}}条评论
		</view>
		<view class="inp">
			<image src="../../../../static/img/1.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
			<input type="text" style="width: 596rpx;height: 72rpx;background-color: #F2F4F9;font-size: 28rpx;line-height: 72rpx;border-radius: 36rpx;padding-left: 20rpx;" placeholder="有话要说,快来评论"/>
			<view class="icon">
				<image src="../../../../static/img/at.png" mode=""></image>
				<image src="../../../../static/img/wind-smile.png" mode=""></image>
				<image src="../../../../static/img/img.png" mode=""></image>
			</view>
		</view>
		
		<view class="pl" v-for="(ele,i) in info.pl" :key="i">
			<view class="">
				<image :src="ele.img" mode="" style="width: 80rpx;height: 80rpx;"></image>
			</view>
			<view class="content1">
				<view class="" style="color: rgba(138,138,138,1);">
					{{ele.user}}
				</view>
				<view class="" style="margin-top: 24rpx;">
					<text>{{ele.content}}</text>
					<text style="font-size: 24rpx;color: rgb(138,138,138);margin-left: 24rpx;">{{ele.time}}</text>
					<text style="font-size: 24rpx;color: rgb(138,138,138);margin-left: 24rpx;">{{ele.addr}}</text>
					<text style="font-size: 24rpx;margin-left: 24rpx;">回复</text>
				</view>
			</view>
			<image src="@/static/img/heart.png" class="like" mode="" v-show="ele.status===false" @tap="changeStatus(i)"></image>
			<image src="@/static/img/heart-fill.png" class="like" mode="" v-show="ele.status===true" @tap="changeStatus(i)"></image>
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				_id:'',
				info:{}
			}
		},
		methods: {
			getinfo(){
				uni.request({
					url:'http://47.93.162.7:3000/getinfo',
					data:{_id:this._id},
					success:(res)=>{
						console.log(res.data.data);
						this.info=res.data.data
					}
				})
			},
			changeStatus(i){
				this.info.pl[i].status=!this.info.pl[i].status
				console.log(this.info.pl[i]);
				uni.request({
					url:'http://47.93.162.7:3000/updateInfo',
					method:'POST',
					data:{obj:this.info},
					success(res) {
						console.log(res.data.msg);
					}
				})
			}
		},
		onLoad(option){
			console.log(option);
			this._id=option.id
			
		},
		mounted(){
			this.getinfo()
		},
		computed:{
			count(){
				let count=this.info.pl.length
				return count
			}
		}
	}
</script>

<style>
.img{
	width: 100%;
	height: 100vh;
}

.infomation{
/* 	padding-left: 30rpx;
	padding-right: 30rpx; */
	width: 100%;
	min-height: 100vh;
	position: absolute;
	background-color: white;
	border-top-right-radius: 40rpx;
	border-top-left-radius: 40rpx;
	top: 95vh;
}

.title{
	margin: 30rpx;
}

.content{
	margin: 30rpx;
}

.time{
	margin: 30rpx;
	color: rgba(138,138,138,1);
}

.inp{
	display: flex;
	align-items: center;
	position: relative;
	margin: 30rpx;
}

.icon{
	display: flex;
	position:absolute;
	left: 480rpx;
}

.icon image{
	width: 30rpx;
	height: 30rpx;
	margin-left: 30rpx;
}

.pl{
	margin: 30rpx;
	margin-top: 48rpx;
	padding-bottom: 30rpx;
	display: flex;
	align-items: center;
	position: relative;
	height: 100rpx;
	border-bottom: 1rpx solid rgb(138,138,138);
}

.content1{
	margin-left: 20rpx;
}

.like{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	right: 30rpx;
	top: 0rpx;
	
}
</style>
